<template>
    <div style="border-bottom: 2px solid #f2f2f2">
        <div class="header">
            <div class="left">
                <img src="../../img/login_logo@2x.png" alt="" />
                <span>
                    <img src="../../img/meiya.jpg" alt="" />
                </span>
            </div>
            <div class="mid">
                <el-menu
                    router
                    :default-active="$router.path"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    :ellipsis="false"
                >
                    <el-menu-item index="/home">首页</el-menu-item>
                    <el-menu-item index="/topic">话题</el-menu-item>
                    <el-menu-item index="/rank">排行</el-menu-item>
                    <el-menu-item index="/follow2">关注</el-menu-item>
                </el-menu>
            </div>
            <div class="right">
                <span @click="login">登录</span>
                <span @click="register">注册</span>
            </div>
        </div>
    </div>
    
    <div>
        话题
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const activeIndex = ref("1");
const activeIndex2 = ref("1");
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};

const router = useRouter();
const login = () => {
  router.push("login");
};
const register = () => {
  router.push("register");
};
</script>

<style lang="scss" scoped>
.header {
  height: 60px;
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.left img {
  width: 58px;
  height: 58px;
}
.mid {
  flex: 0.8;
  display: flex;
  justify-content: flex-start;
  .el-menu-demo {
    border-bottom: 0;
  }
}

.right {
  cursor: pointer;
  span {
    padding: 0 10px;
  }
}
</style>